﻿<DemoPageSectionComponent Id="Navigation-TreeView-Filtering" VerticalAlignment=VerticalAlignment.Top MinHeight="212" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">
        <div class="cw-320">
            <DxTreeView Data="@ApiMember.NavigationApi"
                        @bind-FilterString="FilterString"
                        FilterMinLength="2"
                        ShowFilterPanel="true"
                        Target="_blank"
                        FilterMode="FilterMode"
                        SizeMode="Params.SizeMode"
                        AnimationType="LayoutAnimationType.Slide">
                <DataMappings>
                    <DxTreeViewDataMapping Key="Id" ParentKey="ParentId"
                                           CssClass="CssClass"
                                           Text="Name"
                                           NavigateUrl="NavigateUrl" />
                </DataMappings>
            </DxTreeView>
        </div>
        @code {
            string FilterString { get; set; }
            NavigationFilterMode FilterMode { get; set; } = NavigationFilterMode.EntireBranch;
        }
    </ChildContentWithParameters>
    <OptionsContent>
        <OptionComboBox Label="Filter Mode:"
                        Data="@(new[] {NavigationFilterMode.EntireBranch, NavigationFilterMode.Nodes, NavigationFilterMode.ParentBranch})"
                        @bind-Value="FilterMode">
        </OptionComboBox>
    </OptionsContent>

</DemoPageSectionComponent>

